<template>
  <div>
    <div class="well-layout pb">
      <div class="title">票据融资列表</div>
    </div>
    <div class="well-layout">
      <div class="pb fr to-page-btn">
        <router-link to="/october/billcreate">
          <a-button type="primary">我要融资</a-button>
        </router-link>
      </div>
      <div class="pb">
        <span>审批状态：</span>
        <a-radio-group :defaultValue="status" @change="selectData" buttonStyle="solid">
          <a-radio-button value="1">全部</a-radio-button>
          <a-radio-button value="2">初审中</a-radio-button>
          <a-radio-button value="3">详细审核中</a-radio-button>
          <a-radio-button value="4">已受理</a-radio-button>
          <a-radio-button value="5">已驳回</a-radio-button>
          <a-radio-button value="6">已结束</a-radio-button>
        </a-radio-group>
      </div>
      <a-table class="pb" :columns="tabHead" :dataSource="tabData" :pagination="false">
        <span slot="action" slot-scope="record">
            <router-link class="to-page-btn" :to="`/item/october/billdetail?id=${record.key}`">
              <span>详情</span>
            </router-link>
        </span>
      </a-table>
      <div class="fr pb" >
        <a-pagination v-model="pagination.page" :total="pagination.total" :defaultPageSize="pagination.size" @change="changePage" hideOnSinglePage/>
        <!-- <a-pagination v-model="pagination.page" @change="changePage"
        :total="pagination.total" :defaultPageSize="pagination"> -->
        <!-- <a-pagination v-model="pagination.page" @change="changePage" :total="pagination.total" :defaultPageSize="pagination.size" hideOnSinglePage /> -->
        <!-- </a-pagination> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getList } from '../../../assets/api/billFinancing'
export default {
  name: 'billList',
  data () {
    return {
      tbLoading: true,
      status: '1',
      pagination: {
        page: 1,
        total: 0,
        size: 20
      },
      tabHead: [{
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName'
      }, {
        title: '申请金额（万元）',
        dataIndex: 'applyAmount',
        key: 'applyAmount'
      }, {
        title: '申请时间',
        dataIndex: 'applyTime',
        key: 'applyTime'
      }, {
        title: '申请进展',
        dataIndex: 'statusText',
        key: 'statusText'
      }, {
        title: '操作',
        // dataIndex: '',
        key: 'action',
        scopedSlots: {
          customRender: 'action'
        }
      }],
      tabData: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      this.tbLoading = true
      const res = await getList({
        page: this.pagination.page,
        size: this.pagination.size,
        type: this.status
      })
      this.tbLoading = false
      if (res.error) {
        this.$message.error(res.error.msg)
      } else {
        const statusText = {
          1: '初审中',
          2: '初审中',
          3: '已驳回',
          4: '详细审核中',
          5: '已结束',
          6: '已结束',
          7: '已受理',
          8: '已驳回'
        }
        var data = res.data.billDtoList
        for (var i = 0; i < data.length; i++) {
          data[i].key = data[i].id
          data[i].statusText = statusText[data[i].status]
        }
        this.tabData = data
        this.pagination.total = res.data.total
      }
    },
    selectData (e) {
      this.pagination.page = 1
      this.status = e.target.value
      this.getData()
    },
    changePage (current) {
      this.pagination.page = current
      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  line-height: 16px;
}
.to-page-btn {
  position: relative;
  z-index: 999;
}
</style>
